<template>
  <td><input type="text" :value="fieldName" @input="$emit('update:fieldName', $event.target.value)"></td>
  <!-- <td><input type="text" :value="fieldType" @input="$emit('update:fieldType', $event.target.value)"></td> -->
  <td style="padding: 0;">
    <select @change="handleFieldTypeChange($event.target.value)" class="selectFrame">
      <option v-for="(item, index) in fieldTypes" :key="index" :value="item">{{ item }}</option>
  </select>
  </td>
  <td><input type="text" :value="fieldDescription" @input="$emit('update:fieldDescription', $event.target.value)"></td>
</template>
<script>
export default {
  props: ['fieldName', 'fieldType', 'fieldDescription'],
  emits: ['update:fieldName', 'update:fieldType', 'update:fieldDescription'],
  data() {
    return {
      fieldTypes:[ '字符串','数字','test','test1']
    };
  },
  methods: {
    handleFieldTypeChange(selectedValue) {
      const index = this.fieldTypes.indexOf(selectedValue);
      this.$emit('update:fieldType', index);
    }
  },
};
</script>
<style>
input {
  border: 0px;
}
.selectFrame{
  width: 100%;
  height: 56px;
  border: none;
}
</style>